<template>
	<section>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane v-model="firstDate" label="车辆基础信息" name="first">
				<el-form :label-position="labelPosition" label-width="100px">
					<el-row type="flex" justify="center" :gutter="50">
						<el-col :span="10">
							<el-form-item label="车号:">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item label="车辆颜色:">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item label="备注:">
								<el-input type="textarea" placeholder="请输入备注..."></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="线路牌编号:">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item label="车属信息:">
								上海互济实业有限公司
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row type="flex">
					<el-col :span="4" v-for="fit in fits" :key="fit" :offset="3">
						<span class="title">{{ fit }}</span>
						<el-upload class="avatar-uploader" action="/file/upload"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-col>
				</el-row>
				<el-row class="btnbox">
					<el-col :span="6" :offset="3">
						<el-button type="primary" @click="carInfo">提交</el-button>
						<el-button>取消</el-button>
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="行驶证信息" name="second" :disabled="tabTwo">
				<el-form :label-position="labelPosition" label-width="100px">
					<el-row type="flex" justify="center" :gutter="50">
						<el-col :span="10">
							<el-form-item label="行驶证编号:">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item label="品牌型号::">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item label="发动机号:">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item label="检验有效期:">
								<el-date-picker v-model="value1" type="date" placeholder="请选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="强制报废日期:">
								<el-date-picker v-model="value2" type="date" placeholder="请选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="车辆识别代码:">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item label="核定载人数:">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
							<el-form-item label="注册日期:">
								<el-date-picker v-model="value3" type="date" placeholder="请选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="发证日期:">
								<el-date-picker v-model="value4" type="date" placeholder="请选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="外廓尺寸:">
								<el-input placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row type="flex">					
					<el-col :span="4" v-for="(box,index) in boxs" :key="index" :offset="3">
						<span class="title">{{ box }}</span>
						<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-col>
				</el-row>
				<el-row class="btnbox">
					<el-col :span="6" :offset="3">
						<el-button type="primary">提交</el-button>
						<el-button>取消</el-button>
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="保险信息" name="three" :disabled="tabThree">
				<el-form :label-position="labelPosition" label-width="130px">
					<el-row type="flex" justify="center" :gutter="50">
						<el-col :span="10">
							<el-form-item label="交强险终保日期:">
								<el-date-picker v-model="value5" type="date" placeholder="请选择日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="商业险终保日期:">
								<el-date-picker v-model="value6" type="date" placeholder="请选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="承运人险终保日期:">
								<el-date-picker v-model="value7" type="date" placeholder="请选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row type="flex">					
					<el-col :span="4" v-for="(care,index) in cares" :key="index" :offset="3">
						<span class="title">{{ care }}</span>
						<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-col>
				</el-row>
				<el-row class="btnbox">
					<el-col :span="6" :offset="3">
						<el-button type="primary">提交</el-button>
						<el-button>取消</el-button>
					</el-col>
				</el-row>				
			</el-tab-pane>
			<!-- <el-tab-pane label="车辆检查信息" name="fourth">
				<el-col :span="24">
					<el-table :data="tableData" style="width: 100%">
						<el-table-column prop="date" label="检查日期">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="primary">查看</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-tab-pane> -->
		</el-tabs>

	</section>
</template>

<script>
import { addCar } from "@/api/fzc/car";
	export default {
		data() {
			return {
				tabTwo:true,
				tabThree:true,
				firstDate:{},
				labelPosition: 'right',
				activeName: 'first',
				fits: ['车辆正面：', '车辆侧面：', '其他：'], //车辆基础信息
				boxs: ['行驶证：'], //行驶证信息
				cares: ['商业险：', '交强险：', '承运人险：'], //保险信息				
				tableData: [{
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}],
				url: '',
				imageUrl: '', //上传照片
				value1: '',
				value2: '',
				value3: '',
				value4: '',
				value5: '',
				value6: '',
				value7: '',

			}
		},
		methods: {
			carInfo(){
				//新增车辆基础表
				addCar(this.firstDate).then(res => {
					console.log("ssssss",res.data)
					this.count = res.data.data
				});
				this.tabTwo = false
				this.activeName = "second"
				// console.log("second",s)
			},
			handleClick(tab, event) {
				console.log("1111",tab, event);
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}

		}
	}
</script>
<style>
	.title {
		padding: 0 0 10px;
		display: block;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #a7a3a3;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #d5d7da;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.btnbox {
		padding: 100px 0 20px;
	}

	.el-date-editor.el-input {
		width: 100%;
	}
</style>
